<template>
  <div class="view">
    <Panel title="开课列表">
      <div slot="header">
        <el-row>
          <el-col :span=6>
            <el-button type="primary" @click.native="goCreateClassroom()">开课</el-button>
          </el-col>
          <el-col :span=18>
            <el-input
              v-model="keyword"
              prefix-icon="el-icon-search"
              placeholder="关键词">
            </el-input>
          </el-col>
        </el-row>
      </div>
      <el-table
        v-loading="loading"
        element-loading-text="加载中"
        ref="table"
        :data="classroomList"
        style="width: 100%">
        <el-table-column
          prop="id"
          width="80"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="name"
          label="开课名称">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间">
          <template slot-scope="scope">
            {{scope.row.create_time | localtime }}
          </template>
        </el-table-column>
        <el-table-column
          prop="start"
          label="开始时间">
          <template slot-scope="scope">
            {{scope.row.start | localtime }}
          </template>
        </el-table-column>
        <el-table-column
          prop="end"
          label="结束时间">
          <template slot-scope="scope">
            {{scope.row.end | localtime }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          width="250"
          label="操作">
          <div slot-scope="scope">
            <icon-btn name="编辑" icon="edit" @click.native="goEditClassroom(scope.row.id)"></icon-btn>
            <icon-btn name="删除" icon="trash" @click.native="deleteClassroom(scope.row.id)"></icon-btn>
            <icon-btn name="成绩分析" icon="bar-chart" @click.native="viewDataAnalysis(scope.row.id)"></icon-btn>
          </div>
        </el-table-column>
      </el-table>
      <div class="panel-options">
        <el-pagination
          class="page"
          layout="prev, pager, next"
          @current-change="currentChange"
          :page-size="pageSize"
          :total="total">
        </el-pagination>
      </div>
    </Panel>
  </div>
</template>

<script>
  import api from '../../api.js'

  export default {
    name: 'ClassroomList',
    data () {
      return {
        pageSize: 10,
        total: 0,
        classroomList: [],
        keyword: '',
        loading: false,
        currentPage: 1,
        currentId: 1
      }
    },
    mounted () {
      this.courseId = this.$route.params.courseId
      this.getClassroomList(this.currentPage)
    },
    methods: {
      // 切换页码回调
      currentChange (page) {
        this.currentPage = page
        this.getCourseList(page)
      },
      getClassroomList (page) {
        this.loading = true
        let courseId = this.courseId
        api.getClassroomList(courseId, (page - 1) * this.pageSize, this.pageSize, this.keyword).then(res => {
          this.loading = false
          this.total = res.data.data.total
          this.classroomList = res.data.data
        }, res => {
          this.loading = false
        })
      },
      goEditClassroom (classroomId) {
        let courseId = this.courseId
        this.$router.push({name: 'edit-classroom', params: {classroomId, courseId}})
      },
      goCreateClassroom () {
        let courseId = this.courseId
        this.$router.push({name: 'create-classroom', params: {courseId}})
      },
      deleteClassroom (classroomId) {
        api.deleteClassroom(classroomId).then(res => {
          if (res.status === 200) {
            this.getClassroomList(1)
          }
        })
      },
      viewDataAnalysis (classroomId) {
        let courseId = this.courseId
        this.$router.push({name: 'classroom-data-analysis', params: {classroomId, courseId}})
      }
    },
    watch: {
      'keyword' () {
        this.currentChange(1)
      }
    }
  }
</script>
